<template>
    <div class="divCommomStyle">
        <div class="content">
            <div class="title">
                <span>今日总值班负责人:{{name}}</span>
            </div>
            <div class="table">
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    >
                    <el-table-column
                    prop="name"
                    label="科室"
                    align="center"
                    min-width="20%">
                    </el-table-column>
                    <el-table-column
                    prop="task"
                    label="任务"
                    align="left"
                    min-width="40%"
                    >
                    </el-table-column>
                    <el-table-column
                    prop="responsePerson"
                    align="center"
                    min-width="20%"
                    label="负责人">
                    </el-table-column>
                    <el-table-column
                    prop="status"
                    align="center"
                    min-width="20%"
                    label="状态">
                      <template slot-scope="scope">
                        <span v-if="scope.row.status === 0" >失效</span>
                        <span v-else-if="scope.row.status === 1" >正常</span>
                      </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      name: '张三',
      tableData: [{
        'name': '张丽',
        'task': '监管数据变化',
        'responsePerson': '张丽',
        'status': 1
      },
      {
        'name': '张丽',
        'task': '监管数据变化',
        'responsePerson': '张丽',
        'status': 1
      },
      {
        'name': '张丽',
        'task': '监管数据变化',
        'responsePerson': '张丽',
        'status': 1
      },
      {
        'name': '张丽',
        'task': '监管数据变化',
        'responsePerson': '张丽',
        'status': 1
      }]
    }
  }
}
</script>

<style scoped>
.divCommomStyle{
    display: flex;
    justify-content: center;
    align-items: center;
}
.divCommomStyle .title{
    text-align: left;
}
.divCommomStyle .title span{
  display: inline-block;
  font-size: 14px;
  color: #01c4e0;
  background: #042a54;
  padding:5px 10px;
  border-radius: 5px;
}
.table{
  height: calc(100% - 55px);
  margin-top: 10px;
  padding:5px;
  background: rgba(9, 42, 74, 0.8);
  border-radius: 5px;
  overflow: hidden;
}
</style>
